<template>
  <div class="basic">
    <div class="top-info">
      <div v-for="(item, index) in infoList" :key="index">
        <img :src="require('@/assets/pagesImg/' + item.imgSrc)" alt="" />
        <div class="typeNum">
          <p>{{ item.title }}</p>
          <h1 :class="item.class">{{ item.number1 }}</h1>
          <p class="icons">
            较昨日<span>
              <i
                class="el-icon-caret-top"
                :class="item.number2 > 0 ? 'zj' : ''"
              >
                <br /></i
              ><i
                class="el-icon-caret-bottom"
                :class="item.number2 < 0 ? 'js' : ''"
              ></i> </span
            ><span :class="item.number2 < 0 ? 'jss' : 'zjj'">
              {{ item.number2 }}
            </span>
          </p>
        </div>
      </div>
    </div>
    <!-- <div class="eachats"><eacharts :option="option" /></div> -->
    <div class="center">
      <div style="width: 55%; height: auto">
        <p class="title"><span></span>到岗率预警学校</p>
        <!-- border: 1px red solid; -->
        <el-table
          :data="warnList"
          style="width: 100%; height: 330px; overflow: hidden"
        >
          <el-table-column prop="dwmc" label="学校名称" width="150">
          </el-table-column>
          <el-table-column prop="dwlx" label="学校类型"> </el-table-column>
          <el-table-column prop="fddbrxm" label="法定代表人姓名" width="150">
          </el-table-column>
          <el-table-column prop="ssqy" label="所属区域"> </el-table-column>
          <el-table-column prop="presence_rate" label="到岗率">
            <template slot-scope="scope">
              {{ scope.row.presence_rate }}%
            </template>
          </el-table-column>
          <el-table-column prop="date" label="预警时间"> </el-table-column>
        </el-table>
      </div>
      <div>
        <dglpmCopy></dglpmCopy>
      </div>
    </div>
    <div class="bottom">
      <div>
        <p class="title" style="padding: 15px 0 0 15px; margin-bottom: 10px">
          <span></span>到岗率合格数量
        </p>
        <div id="dgl"></div>
      </div>
      <div>
        <p class="title" style="padding: 15px 0 0 15px; margin-bottom: 10px">
          <span></span>预警趋势对比
        </p>
        <div id="warning"></div>
      </div>
    </div>
  </div>
</template>
<script>
// import eacharts from "@/components/eacharts/index.vue";
import dglpmCopy from "@/components/dglpmCopy/index.vue";
// import { center } from "@/api/police";
import {
  dutyStatistics,
  dutyStatisticsDwlx,
  dutyStatisticsDate,
  userStatistics,
} from "@/api/dgl";
let bgColor = "#fff";
let color = ["#A143FF", "#1E9EFB", "#FFC005", "#FF515A", "#8B5CFF", "#00CA69"];

export default {
  name: "BasicInformation",
  components: { dglpmCopy },
  data() {
    return {
      infoList: [
        {
          title: "护学岗人员总数",
          number1: "",
          number2: "",
          imgSrc: "5322@2x.png",
          class: "a",
          // imgSrc: "/static/img/pagesImg/组 6769.png",
        },
        {
          title: "民警数量",
          number2: "",
          number1: "",
          imgSrc: "5323@2x.png",
          class: "b",
        },
        {
          title: "教师数量",
          number2: "",
          number1: "",
          imgSrc: "5300@2x.png",
          class: "c",
        },
        {
          title: "护学岗数量",
          number1: "",
          number2: "",
          imgSrc: "5326@2x.png",
          class: "d",
        },
        {
          title: "安保数量",
          number1: "",
          number2: "",
          imgSrc: "5325@2x.png",
          class: "e",
        },
      ],
      token: JSON.parse(localStorage.getItem("userInfo")).token,
      schoolTile: [
        "学校名称",
        "学校类型",
        "法定代表人姓名",
        "所属区域",
        "到岗率",
        "预警时间",
      ],
      warnList: [],
      school: {},

      // 预警趋势对比数据
      echartData: [],
      dwlx: [
        // 单位名称
        "幼儿园",
        "小学",
        "初中",
        "高中",
        "职业高中",
        "九年一贯 制",
        "十二年一 贯制",
        "中等技术 学校",
        "特殊学校",
        "教学点",
        "完全中学",
      ],
      count: [6, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    };
  },
  methods: {
    // initDutyStatisticsDwlx() {
    //   let that = this;
    // },

    async initDglPm() {
      let that = this;
      // console.log(JSON.parse(localStorage.getItem("userInfo")).token);
      userStatistics().then((res) => {
        // console.log(res);
        if (res.code == 200) {
          that.infoList[0].number1 = res.data.AllCounts;
          that.infoList[1].number1 = res.data.MinjingCounts;
          that.infoList[2].number1 = res.data.JiaoshiCounts;
          that.infoList[3].number1 = res.data.HuxuegangCounts;
          that.infoList[4].number1 = res.data.AnbaoCounts;
          // =============================
          that.infoList[0].number2 = res.data.allchaju;
          that.infoList[1].number2 = res.data.minjingchaju;
          that.infoList[2].number2 = res.data.jiaoshichaju;
          that.infoList[3].number2 = res.data.huxuegangchaju;
          that.infoList[4].number2 = res.data.anbaochaju;
        }
      });
      // 到岗率预警学校
      await dutyStatistics({
        token: JSON.parse(localStorage.getItem("userInfo")).token,
      }).then((res) => {
        res.data.time =
          res.data.time > 10
            ? res.data.time + ":00"
            : "0" + res.data.time + ":00";
        res.data.res.forEach((item) => {
          item.date = item.date + " " + res.data.time;
        });
        // console.log(res.data);
        // console.log(res.data.time);
        that.warnList = res.data.res.splice(0, 40);
        // that.warnList = res.data.res.splice(0, 6);
      });
    },
    createTime() {
      let t = 1;
      t = t > 10 ? t + ":00" : "0" + t + ":00";
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      console.log(`${year}-${month}-${day} ` + " " + t);
      return `${year}-${month}-${day}`;
    },
    async createChart() {
      let that = this;
      let arr1 = [];
      let arr2 = [];
      await dutyStatisticsDwlx().then((res) => {
        console.log(res);
        if (res.code == 200) {
          res.data.data.forEach((item) => {
            arr1.push(item.dwlx);
            arr2.push(item.count);
          });
          that.$nextTick(() => {
            that.dwlx = arr1;
            that.count = arr2;
          });
          // console.log(arr1);
          // console.log(arr2);
          // console.log(that.dwlx);
          // console.log(that.count);
        }
      });
      // this.initDutyStatisticsDwlx();
      // const chart = this.$echarts.init(document.getElementById("chart"));
      const main = this.$echarts.init(document.getElementById("dgl"));
      const warning = this.$echarts.init(document.getElementById("warning"));
      const option = {
        backgroundColor: "#FFFFFF",
        // backgroundColor: "red",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
            label: {
              width: 100,
            },
          },
          formatter: function (params) {
            // console.log(params);
            return `<span style=" font-weight: bold;width:100px!important;display:inline-block;">昨日数据：${params[0].data}</span>`;
          },
        },
        // 图表的整体位置
        grid: {
          top: "8%",
          left: "4%",
          bottom: "8%",
          containLabel: true,
        },
        // x轴相关配置
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            nameLocation: "center",
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              nameLocation: "center",
              // backgroundColor: "red",
              lineStyle: {
                color: "#00B3FE",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              // rotate: 45, // 旋转角度
              interval: 0, // 强制显示所有标签
              textStyle: {
                // color: "#13213B",
                color: "#13213B",
                padding: [10, 0, 10, 0],
              },
              // interval: 0,
              formatter: function (params) {
                let newParamsName = "";
                const paramsNameNumber = params.length; // 文字总长度
                const provideNumber = 4; //一行显示几个字
                const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (let p = 0; p < rowNumber; p++) {
                    const start = p * provideNumber;
                    const end = start + provideNumber;
                    const tempStr =
                      p === rowNumber - 1
                        ? params.substring(start, paramsNameNumber)
                        : params.substring(start, end) + "\n";
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
            axisTick: {
              show: false,
            },
            data: this.dwlx,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 500,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#D9D9D9",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(0, 179, 254, 1)",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                color: "#13213B",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 20,
            tooltip: {
              show: true,
            },
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x1: 0,
                  y1: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#2785FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00F6FF", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: that.count,
            // [800, 382, 202, 267, 386, 315, 316, 300, 500, 560, 900], // 数据
          },
        ],
      };
      // ================
      // 预警趋势对比
      await dutyStatisticsDate({
        token: JSON.parse(localStorage.getItem("userInfo")).token,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.echartData = res.data;
          let xAxisData = that.echartData.map((v) => v.date);
          let yAxisData1 = that.echartData.map((v) => v.numbers);
          let yAxisData2 = that.echartData.map((v) => v.value2);
          const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
              rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5)
              )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
          };

          const options1 = {
            backgroundColor: bgColor,
            color: color,
            legend: {
              right: 10,
              top: 10,
              icon: "circle",
              itemGap: 10,
              // backgroundColor: "#fff",
              // itemStyle: {
              //   borderWidth: 2, // 设置边框宽度
              //   borderColor: "red", // 设置边框颜色
              //   // borderType: "dashed", // 设置边框类型，可选值有'solid'（实线）和'dashed'（虚线）
              //   borderRadius: 10, // 设置边框圆角半径
              //   color: "white", // 设置图标的填充颜色
              //   emptyBorderColor: "black", // 设置空心圆的边框颜色
              //   emptyBorderWidth: 1, // 设置空心圆的边框宽度
              // },
              // data: ["今日"],
            },
            tooltip: {
              trigger: "axis",
              formatter: function (params) {
                console.log(params);
                let html = "";
                params.forEach((v) => {
                  // console.log(v);
                  html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <p style="margin-right:5px;border-radius:10px;width:10px;height:20px;">预警数量</p>
                ${v.axisValue}:
                <span style="color:${
                  color[v.componentIndex]
                };font-weight:700;font-size: 18px">${v.value}</span>
                `;
                });
                return html;
              },
              extraCssText:
                "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
              axisPointer: {
                type: "shadow",
                shadowStyle: {
                  color: "#ffffff",
                  shadowColor: "rgba(225,225,225,1)",
                  shadowBlur: 5,
                },
              },
            },
            grid: {
              top: "4%",
              left: "9%",
              width: "100%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                nameLocation: "center",
                boundaryGap: false,
                axisLabel: {
                  formatter: "{value}",

                  textStyle: {
                    color: "#333",
                  },
                  subtextStyle: {
                    align: "center",
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "#D9D9D9",
                  },
                  onZero: false,
                },
                data: xAxisData,
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  textStyle: {
                    color: "#666",
                  },
                },
                nameTextStyle: {
                  color: "#666",
                  fontSize: 12,
                  lineHeight: 40,
                },
                splitLine: {
                  lineStyle: {
                    // type: "dashed",
                    color: "#E9E9E9",
                  },
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: "",
                type: "line",
                smooth: true,
                showSymbol: false,
                zlevel: 3,
                lineStyle: {
                  normal: {},
                },
                areaStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: hexToRgba(color[0], 0.3),
                        },
                        {
                          offset: 1,
                          color: hexToRgba(color[0], 0.1),
                        },
                      ],
                      false
                    ),
                    shadowColor: hexToRgba(color[0], 0.1),
                    shadowBlur: 10,
                  },
                },
                data: yAxisData1,
              },
              // {
              //   name: "今日",
              //   type: "line",
              //   smooth: true,
              //   showSymbol: false,
              //   zlevel: 3,
              //   lineStyle: {
              //     normal: {},
              //   },
              //   areaStyle: {
              //     normal: {
              //       color: new this.$echarts.graphic.LinearGradient(
              //         0,
              //         0,
              //         0,
              //         1,
              //         [
              //           {
              //             offset: 0,
              //             color: hexToRgba(color[1], 0.3),
              //           },
              //           {
              //             offset: 1,
              //             color: hexToRgba(color[1], 0.1),
              //           },
              //         ],
              //         false
              //       ),
              //       shadowColor: hexToRgba(color[1], 0.1),
              //       shadowBlur: 10,
              //     },
              //   },
              //   data: yAxisData2,
              // },
            ],
          };
          warning.setOption(options1);
        }
      });
      main.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.createChart();
    this.createTime();
    this.initDglPm();
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-table__body {
  animation: scroll 100s linear infinite;
}
/deep/.el-table__body:hover {
  animation-play-state: paused;
}
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
.zj {
  color: #1cdc7c !important;
}
.zjj {
  color: #1cdc7c !important;
  font-size: 16px;
  font-family: Arial-Bold, Arial;
  font-weight: bold;
  line-height: 0px;
}
.js {
  color: #ff4444 !important;
}
.jss {
  color: #ff4444 !important;
  font-size: 16px;
  font-family: Arial-Bold, Arial;
  font-weight: bold;
  line-height: 0px;
}
.icons span {
  display: inline-block;
  // border: 1px red solid;
  width: 16px;
  height: 15px;
  // overflow: auto;
}
.icons span:nth-of-type(1) {
  position: relative;
  top: 3px;
  // border: none;
}
.icons i {
  display: block;
  margin-top: 3px;
  color: #d7dbe3;
  // border: 1px red solid;
  font-size: 10px;
  height: 5px;
  width: 9px;
}
.top-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top-info > div {
  display: flex;
  width: 19%;
  height: 100px;
  // border: 1px red solid;
  border-radius: 10px;
  background-color: white;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.top-info > div img {
  width: 77px;
  height: 75px;
}
.top-info > div > div {
  // border: 1px red solid;
  display: flex;
  flex: 1;
  text-align: left;
  vertical-align: middle;
  height: 100px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.eachats {
  // border: 1px red solid;
  border-radius: 15px;
  background-color: white;
  box-sizing: border-box;
  margin: 20px 0 20px 0;
  padding: 20px;
  height: 350px;
}
.schoolInfo {
  // border: 1px red solid;
  box-sizing: border-box;
  background-color: white;
  padding: 15px;
  border-radius: 15px;
}

.typeNum {
  margin-left: 15px;
}
.typeNum h1 {
  font-size: 28px;
  font-family: Segoe UI-Semibold, Segoe UI;
  font-weight: 600;
  margin-left: 15px;
  height: 30px;
  line-height: 30px;
}
.a {
  color: #7896ff;
}
.b {
  color: #1883f7;
}
.c {
  color: #ff6c90;
}
.d {
  color: #a382ff;
}
.e {
  color: #ff802e;
}
.center {
  // border: 1px red solid;
  width: 100%;
  display: flex;
  height: 100%;
  box-sizing: border-box;
  min-width: 1000px;
}

.center > div:nth-of-type(1) {
  background-color: #fff;
  margin: 15px 15px 15px 0;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 15px;
}
.center > div:nth-of-type(2) {
  background-color: #fff;
  margin: 15px 0 15px 0;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 15px;
  width: 43%;
  flex: 1;
  // border: 1px red solid;
}
.title span {
  box-sizing: border-box;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  line-height: 8px;
  background: #126bff;
  opacity: 1;
  margin: 4px;
}
/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
}
/deep/.el-table td.el-table__cell div {
  text-align: center;
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #13213b;
}
.title {
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
  text-align: left;
}
.bottom {
  // border: 1px red solid;
  height: 400px;
  display: flex;
}
.bottom > div {
  border-radius: 16px;
  background: #ffffff;
  // border: 1px blue solid;
  overflow: hidden;
  margin: 0px 15px 7.5px 0px;
  width: 50%;
}
.bottom > div:nth-child(2) {
  margin: 0px 0 7.5px 0;
}
#dgl {
  width: 100%;
  // width: auto;
  height: 300px;
  // border: 1px red solid;
  border-radius: 16px;
  background: #ffffff;
}
/deep/#dgl > div {
  width: 20% !important;
  canvas {
    width: 100%;
  }
}
#warning {
  position: relative;
  right: 50px;
  width: 100%;
  // width: auto;
  height: 350px;
  // border: 1px red solid;
  border-radius: 16px;
  background: #ffffff;
}
</style>
